<template>
  <div class="wrap">
    <top></top>
    <div class="side-bar">
      <el-menu
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="choiseMenu"
      >
        <el-menu-item index="0">
          <i class="el-icon-menu"></i>
          <span slot="title">轴体厂商</span>
        </el-menu-item>
        <el-menu-item index="1">
          <i class="el-icon-setting"></i>
          <span slot="title">轴体作者</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          <span slot="title">轴体</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">试轴器</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">键盘</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">轴体库存</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import Top from "@/views/common/Top";
import { Menu, Submenu, MenuItem, MenuItemGroup } from "element-ui";
export default {
  name: "backend-home",
  components: {
    Top,
    [Menu.name]: Menu,
    [Submenu.name]: Submenu,
    [MenuItem.name]: MenuItem,
    [MenuItemGroup.name]: MenuItemGroup
  },
  data() {
    return {
      currentIndex: null,
      pathList: [
        "/manufacturer",
        "/author",
        "/switch",
        "/user-manage",
        "/tester",
        "/store-switch",
        "/keyboard"
      ]
    };
  },
  mounted() {
    this.pathList.forEach((item, index) => {
      this.pathList[index] = "/backend" + item;
    });
    this.choiseMenu(0);
  },
  methods: {
    choiseMenu(index, indexPath) {
      if (this.currentIndex == null || this.currentIndex != index) {
        this.currentIndex = index;
        this.$router.push({ path: this.pathList[index] });
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .side-bar {
    position: fixed;
    width: 200px;
    left: 0;
    top: 40px;
    bottom: 0;
    z-index: 1000;

    .el-menu {
      height: 100%;
    }
  }

  .content {
    padding-left: 205px;
    padding-top: 5px;
  }
}
</style>